<template>
	<view style="height: 100%;" class="bg-gray">
		<cu-custom :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{toUserName}}</block>
		</cu-custom>
		<scroll-view>
			<view class="container" style="width: 100%;">
				<view class="tui-chat-content" style="width: 100%;">
					<tui-loadmore v-if="loadding" :index="3" type="primary" text=" "></tui-loadmore>
					<view v-for="(item,index) in dataList" :key="index">
						<view v-if="item.isMy">
							<view class="tui-chat-right">
								<view class="flex align-end justify-start padding-right-xs" style="flex-direction: column;">
									<text class="text-sm text-gray">{{item.show_time}}</text>
									<view v-if="item.read_status==1">
										<text class="cuIcon-check text-gray text-sm"></text>
									</view>
								</view>
								<view @longpress="copyContent(item.content)" class="tui-chatbox tui-chatbox-right">{{item.content}}</view>
								<image @click="jumpToUserProfile(item.sender.user_id)" :src="item.sender.avatar" class="tui-user-pic tui-left"></image>
							</view>
						</view>
						<view v-else>
							<view class="tui-chat-left">
								<image @click="jumpToUserProfile(item.sender.user_id)" :src="item.sender.avatar" class="tui-user-pic tui-right"></image>
								<view  @longpress="copyContent(item.content)"  class="tui-chatbox tui-chatbox-left">{{item.content}}</view>
								<text class="text-sm text-gray padding-left-xs">{{item.show_time}}</text>
							</view>
						</view>
					</view>
					<view class="tui-label">小纸条不是实时聊天哦~</view>
				</view>
			</view>
		</scroll-view>
		<view class="cu-bar foot flex justify-center align-center bg-gray" style="width: 100%;">
			<form style="width: 100%;">
				<view class="padding-sm flex justify-start align-center" style="width: 100%;">
					<view class="padding-xs bg-white radius" style="width: 100%;">
						<input confirm-type="send" @confirm="sendMessageAction" cursor-spacing="30" v-model="inputText" class="radius padding-left-xs" maxlength="500" placeholder="输入小纸条内容"
							style="width: 100%;"></input>
					</view>
					<view class="padding-left padding-right">
						<button @tap="sendMessageAction" class="cu-btn radius bg-blue"
							style="min-width: 150upx;">发送</button>
					</view>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import {
		getTimeDistance
	} from '@/api/utils.js'
	import {
		sendMessage,
		getPrivateMessageList,
		markMessageRead,
		refreshConversationUnreadCount
	} from '@/api/api.js'
	import {
		getUserInfo
	} from '@/api/auth.js'
	export default {
		data() {
			return {
				myUserId: null,
				toUserName:null,
				toUserId: null,
				loadding: false,
				show: false,
				bottom: 0,
				noMore: false,
				pageIndex: 0,
				pageSize: 10,
				inputText: '',
				dataList: '',
				chatList: [{
					type: 1, //1-文字 2-图片 3-语音，4-时间 5-提醒 ...
					userId: 1, //用户标识 不一定是userid
					text: '',
					src: '',
					read: false,
					success: false
				}]
			};
		},
		onLoad: function(options) {
			let userInfo = getUserInfo()
			this.myUserId = userInfo.user_id
			if (options.toId !== null && options.toId !== undefined && options.toId.length > 0) {
				this.toUserId = options.toId
				this.pageIndex = 0
				this.getMessageList(this.pageIndex)
			}
			if(options.toName !== null && options.toName !== undefined && options.toName.length > 0) {
				this.toUserName = options.toName
			}
		},
		methods: {
			copyContent(content) {
				uni.setClipboardData({
					data: content,
					success: function() {
						uni.showToast({
							icon: 'none',
							title: '内容已复制!'
						});
					}
				});
			},
			jumpToUserProfile(userId) {
				uni.navigateTo({
					url: '/pages/profile/profile?userId=' + userId
				})
			},
			getMessageList(pageIndex) {
				if (this.noMore) {
					return
				}
				this.loadding = true
				getPrivateMessageList(this.toUserId, this.pageIndex, this.pageSize).then(res => {
					res.data.list.forEach(item => {
						item.show_time = getTimeDistance(item.created_at)
						item.isMy = item.sender.user_id == this.myUserId
					})
					let reSort = res.data.list.reverse()
					if (pageIndex == 0) {
						this.dataList = reSort
					} else {
						this.dataList = reSort.concat(this.dataList)
					}
					if (reSort.length < this.pageSize) {
						this.noMore = true
					}
					this.loadding = false
					if(res.data.id_list && res.data.id_list.length > 0) {
						//设置已读
						markMessageRead(res.data.id_list,this.toUserId).then(res=>{
							console.log('mark message read status success!')
						}).catch(error=>{
							console.log('mark message read status faild')
						})
					}else{
						refreshConversationUnreadCount(this.toUserId).then(res=>{
							console.log('刷新会话未读数成功')
						}).catch(error=>{
							console.log('刷新会话未读数失败')
						})
					}
				}).catch(error => {
					this.loadding = false
				})
			},
			sendMessageAction() {
				if (this.inputText.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入内容'
					})
					return
				}
				uni.showLoading({
					title:'正在发送...'
				})
				sendMessage(this.toUserId, this.inputText).then(res => {
					uni.hideLoading()
					res.data.isMy = true
					res.data.show_time = getTimeDistance(res.data.created_at)
					this.dataList.push(res.data)
					this.inputText = ''
				}).catch(error => {
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '发送失败'
					})
				})
			}
		},
		onPageScroll(e) {
			if (this.noMore) {
				return
			}
			if (e.scrollTop == 0 && !this.loadding) {
				this.pageIndex++
				this.getMessageList(this.pageIndex)
			}
		}
	};
</script>

<style>
	.container {
		width: 100%;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 146rpx;
		box-sizing: border-box;
	}

	/*chatbox*/
	.tui-chat-content {
		width: 100%;
	}

	.tui-chatbox {
		max-width: 66%;
		border-radius: 10rpx;
		position: relative;
		padding: 20rpx 22rpx;
		font-size: 32rpx;
		color: #333;
		word-break: break-all;
		word-wrap: break-word;
	}

	.tui-chatbox::before {
		content: '';
		position: absolute;
		width: 0;
		height: 0;
		top: 20rpx;
		border: 16rpx solid;
	}

	.tui-chatbox-left {
		background: #fff;
		border: 1rpx solid #fff;
		display: inline-block;
	}

	.tui-chatbox-left::before {
		right: 100%;
		border-color: transparent #fff transparent transparent;
	}

	.tui-chatbox-right {
		background: #a0d5f3;
		border: 1rpx solid #a0d5f3;
	}

	.tui-chatbox-right::before {
		left: 100%;
		border-color: transparent transparent transparent #a0d5f3;
	}

	/*chatbox*/

	.tui-chat-left,
	.tui-chat-right {
		display: flex;
		align-items: flex-start;
		padding-top: 36rpx;
	}

	.tui-user-pic {
		width: 80rpx;
		height: 80rpx;
		flex-shrink: 0;
		border-radius: 50%;
		display: block;
	}

	.tui-left {
		margin-left: 26rpx;
	}

	.tui-right {
		margin-right: 26rpx;
	}

	.tui-chat-right {
		justify-content: flex-end;
	}

	.tui-chat-center {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 28rpx;
		font-size: 28rpx;
		color: #666;
		padding-top: 36rpx;
	}

	.tui-label {
		display: inline-block;
		background: rgba(0, 0, 0, 0.4);
		color: #fff;
		font-size: 24rpx;
		line-height: 24rpx;
		margin-top: 36rpx;
		padding: 12rpx 16rpx;
		text-align: center;
		border-radius: 8rpx;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	.tui-img-chatbox {
		position: relative;
	}

	.tui-img-chatbox::after {
		content: '';
		position: absolute;
		height: 200%;
		width: 200%;
		border: 1rpx solid #eaeef1;
		transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		left: 0;
		top: 0;
		border-radius: 20rpx;
	}

	.tui-chat-img {
		max-width: 200rpx;
		/* min-height: 80rpx; */
		display: block;
		border-radius: 10rpx;
	}

	.tui-chat-flex {
		display: flex;
		align-items: center;
	}

	.tui-flex-center {
		display: flex;
		align-items: center;
	}

	.tui-chat-voice {
		width: 40rpx;
		height: 40rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-rotate {
		transform: rotate(180deg);
	}

	.tui-chat-fail {
		width: 50rpx;
		height: 50rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-mr {
		margin-right: 16rpx;
	}

	.tui-ml {
		margin-left: 16rpx;
	}

	.tui-flex-end {
		justify-content: flex-end;
	}

	.tui-flex-reverse {
		flex-direction: row-reverse;
	}
</style>
